<template>
  <div class="c-drawer">
    <div class="article-wrap"></div>
    <div class="phone-wrapper">
      <div :class="watchScreen">
        <h5 class="article-logo">今日头条</h5>
        <div class="article-content">
          <p class="article-title twoLineOverflow">{{ title }}</p>
          <div class="article-footer">
            {{ userName }} <span style="color: #999">{{ new Date() | formatTime }}</span>
          </div>
          <div class="article-richtext" :class="watchContent" v-html="previewContent"></div>
        </div>
        <section class="preview-toolbox" :class="{ darkAppearance: modeChecked }">
          <div class="screen-size">
            <p>屏幕尺寸</p>
            <el-button size="mini" :type="type47" @click="changeType47">4.7寸</el-button>
            <el-button size="mini" :type="type55" @click="changeType55">5.5寸</el-button>
            <el-button size="mini" :type="type58" @click="changeType58">5.8寸</el-button>
          </div>
          <div class="display-mode">
            <p>显示模式</p>
            <el-checkbox v-model="modeChecked">深色模式</el-checkbox>
          </div>
          <div class="phone-preview">
            <p>手机预览</p>
            <div class="phone-qrcode">
              <img src="https://mokr.oss-cn-hangzhou.aliyuncs.com/custom/wechat.jpg" alt="" />
              <div style="margin-top:8px">请打开<span style="color: #f04142">今日头条App</span>扫码查看</div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <section class="close-preview" @click="closePrview">
      <img src="@/assets/imgs/search_close.png" alt="" />
    </section>
  </div>
</template>
<script>
import { getLocalStorage } from '@/utils/index';

export default {
  props: {
    drawerContentVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    previewContent: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      type47: 'danger',
      type55: 'default',
      type58: 'default',
      loading: false,
      userName: '',
      modeChecked: false
    };
  },
  computed: {
    watchScreen() {
      return {
        'phone-model-5-8': this.type58 === 'danger',
        'phone-model-5-5': this.type55 === 'danger',
        'phone-model-4-7': this.type47 === 'danger'
      };
    },
    watchContent() {
      return {
        richtext480: this.type58 === 'danger',
        richtext440: this.type55 === 'danger',
        richtext390: this.type47 === 'danger'
      };
    }
  },
  watch: {
    drawerContentVisible: {
      handler: function(val) {
        if (val) {
          document.body.style.overflow = 'hidden';
        }
      },
      immediate: true
    }
  },
  created() {
    this.userName = '萌新' + getLocalStorage('userName').substring(7, 11);
  },
  methods: {
    closePrview() {
      document.body.style.overflow = '';
      this.$emit('closePrview');
    },
    changeType47() {
      this.type47 = 'danger';
      this.type55 = 'default';
      this.type58 = 'default';
    },
    changeType55() {
      this.type47 = 'default';
      this.type55 = 'danger';
      this.type58 = 'default';
    },
    changeType58() {
      this.type47 = 'default';
      this.type55 = 'default';
      this.type58 = 'danger';
    }
  }
};
</script>
<style lang="scss" scoped>
.c-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  .article-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.6;
  }
  .phone-wrapper {
    width: 340px;
    height: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    .phone-model-5-8 {
      background-image: url(//sf3-scmcdn-tos.pstatp.com/goofy/pgcfe/mp/graphic/a13e1fbe4fce48871963a6829172e026.png);
      width: 309px;
      height: 641px;
      padding: 8px 10px;
      background-size: cover;
    }
    .phone-model-5-5 {
      background-image: url(//sf3-scmcdn-tos.pstatp.com/goofy/pgcfe/mp/graphic/1b31eb9ef6ad6e4adcdeaa1673fae918.png);
      width: 339px;
      height: 643px;
      padding: 40px 10px 36px;
      background-size: cover;
    }
    .phone-model-4-7 {
      background-image: url(//sf3-scmcdn-tos.pstatp.com/goofy/pgcfe/mp/graphic/2a5600cb111e5f38a12b9ac6a5d5f0f5.png);
      width: 309px;
      height: 590px;
      padding: 40px 10px 36px;
      background-size: cover;
    }
    .article-logo {
      display: flex;
      justify-content: center;
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid #eaeaea;
      margin-top: 8px;
    }
    .article-content {
      padding: 4px 12px;
      .article-title {
        line-height: 20px;
      }
      .article-footer {
        font-size: 12px;
        color: #555;
        margin-top: 4px;
      }
      .article-richtext {
        line-height: 22px;
        margin-top: 12px;
        overflow: auto;
      }
      .richtext390 {
        height: 390px;
      }
      .richtext440 {
        height: 440px;
      }
      .richtext480 {
        height: 480px;
      }
      .article-richtext::-webkit-scrollbar {
        width: 6px;
      }
      .article-richtext::-webkit-scrollbar-thumb {
        border-radius: 2px;
        border: 2px solid transparent;
        background-color: #999;
        background-clip: padding-box;
        box-shadow: inset -1px -1px 0 #979797, inset 1px 1px 0 #979797;
      }
    }
    .preview-toolbox {
      position: absolute;
      right: -277px;
      width: 240px;
      top: 50%;
      transform: translateY(-50%);
      padding: 28px 16px;
      border-radius: 4px;
      background-color: #f5f5f5;
      p {
        font-size: 14px;
        color: #666;
        margin-bottom: 12px;
      }
      .screen-size {
        margin-bottom: 30px;
      }
      .display-mode {
        margin-bottom: 30px;
      }
      .phone-preview {
        img {
          width: 100px;
          height: 100px;
          border-radius: 2px;
        }
        .phone-qrcode {
          font-size: 12px;
          text-align: center;
        }
      }
    }
  }
  .close-preview {
    position: absolute;
    right: 48px;
    top: 48px;
    cursor: pointer;
    img {
      width: 38px;
      height: 38px;
    }
  }
  .darkAppearance {
    background-color: #222 !important;
  }
}
</style>
